<template>
  <div>
    <el-dialog title="分配角色" :visible="isShow" @close="cancle">
      <!-- 多选框 -->
      <!-- label表示多选框选中的值 -->
      <h3>{{ list }}</h3>
      <el-checkbox-group v-model="list">
        <el-checkbox v-for="item in infoList" :key="item.id" :label="item.id">{{ item.name }}</el-checkbox>
      </el-checkbox-group>
      <template>
        <div class="btn">
          <el-button type="primary" @click="submit">提交</el-button>
          <el-button @click="cancle">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { sysrole } from '@/api/setting'
import { sysuserGet } from '@/api/employees.js'
import { sysuserassignRoles } from '@/api/permission.js'
export default {
  props: {
    isShow: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      list: [],
      infoList: [],
      id: ''
    }
  },
  created() {
    this.getRoleList()
  },
  //   点击取消按钮，关闭分配角色弹框
  methods: {
    cancle() {
      this.$emit('update:isShow', false)
      //   多选框关闭再打开，会缓存上一次打开执行多选框的结果，会造成bug所有需要我们再关闭的手动清除缓存数据
      this.list = ''
    },
    // 打开弹窗的时候渲染数角色列表
    async getRoleList() {
      const res = await sysrole({
        page: 1,
        pagesize: 100
      })
      this.infoList = res.data.rows
      console.log(res)
    },
    // 获取当前用户的角色信息，并渲染到页面上
    async getRoleInfo(id) {
      this.id = id
      const res = await sysuserGet(id)
      this.list = res.data.roleIds
      console.log('信息', res)
    },
    // 点击提交的时候，把设置的员工角色存储提交到数据库保存下来，关闭弹窗，提示用户信息修改成功
    async submit() {
      // 请求接口传入id，员工的角色列表
      const res = await sysuserassignRoles({
        id: this.id,
        roleIds: this.list
      })
      //   提醒用户修改成功
      this.$message.success('修改成功')
      //   关闭弹框
      this.cancle()
      console.log(res)
    }

  }

}
</script>

<style>

</style>
